import React, { Component } from 'react';
import PropType from 'prop-type';
import $ from 'jquery';

export default class Record extends Component {
    constructor() {
        super();
        this.state = {
            editable: false,
        };
    }
    handleEditClick() {
        this.setState({
            'editable': true
        });
    }
    handleUpdateClick() {
        let date = this.refs.date;
        let title = this.refs.title;
        let amount = this.refs.amount;
        $.post('http://localhost:53000/records', { date, title, amount }, data => {
            console.log(data);
            this.props.handleUpdateClick();
        });
    }
    render = function () {
        let recordComponent = '';
        let state = this.state;
        if (state.editable) {
            return <tr><td>
                <input type="text" className='form-control' defaultValue={this.props.date} ref='date' /></td>
                <td>
                    <input type="text" className='form-control' defaultValue={this.props.title} ref='title' />
                </td>
                <td>
                    <input type="text" className='form-control' defaultValue={this.props.amount} ref='amount' /></td>
                <td>
                    <div className='btn-group'>
                        <button className='btn btn-info' onClick={this.handleUpdateClick.bind(this)}>Update</button><button className='btn btn-danger'>Delete</button>
                    </div>
                </td></tr>
        }
        return <tr><td>
            {this.props.date}</td>
            <td>
                {this.props.title}</td>
            <td>
                {this.props.amount}</td>
            <td>
                <div className='btn-group'>
                    <button className='btn btn-info' onClick={this.handleEditClick.bind(this)}>Edit</button>
                    <button className='btn btn-danger'>Delete</button>
                </div>
            </td></tr>
    }
}

Record.propType = {
    id: PropType.number,
    date: PropType.string,
    title: PropType.string,
    amount: PropType.number
}